<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="表单明细信息"
        width="560px"
    >
        <div class="edit_page_div">
            <el-form ref="form" :model="form" :rules="rules" :show-message="false" label-width="100px">
                <el-form-item label="显示标签" prop="showName">
                    <el-input v-model="form.showName" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="控件名称" prop="empName">
                    <el-input v-model="form.empName" style="width: 400px;"></el-input>
                </el-form-item>
            </el-form>
            <div class="edit_button">
                <el-button v-loading.fullscreen.lock="loading" type="primary" @click="submit">保 存</el-button>
                <el-button type="primary" @click="resetForm">取 消</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import RadiosOption from "@/components/radio/radiosOption.vue";

export default {
    name: "formDetailEdit",
    components: {RadiosOption},
    props: {
        visible: Boolean,
    },
    data() {
        return {
            height: '300px',
            loading: false,
            form: {
                showName: '',
                empName: '',
                isShow: 1,
                isReadonly: 2,
            },
            rules: {
                showName: [{required: true, message: '', trigger: 'change'}],
                empName: [{required: true, message: '', trigger: 'change'}],
                isShow: [{required: true, message: '', trigger: 'change'}],
                isReadonly: [{required: true, message: '', trigger: 'change'}],
            },
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.$refs.form.resetFields();
                this.form = this.$options.data().form;
            }
        }
    },
    methods: {
        submit() {
            this.$emit('change', this.form);
            this.resetForm();
        },
        resetForm() {
            this.$emit('update:visible', false);
        },
    }
}
</script>

<style scoped>

</style>